<template>
    <div v-wechat-title="VueTitle">
        <!-- <nav class="box clearfix">
            <div class="w-1200 clearfix">
                <div class="left-cont clearfix fl">
                    <router-link to="/home" class="logo-box"><img v-if="platformConfig && platformConfig.pc_logo" :src="imgRequest + platformConfig.pc_logo" alt=""></router-link>
                </div>
            </div>
        </nav>      -->
        <!-- nav -->

        <div class="main-content-wrap login-main-bg clearfix">
            <div class="w-1200 clearfix">
                
                <div class="login-main-wrap">
                    <div class="user-log-box">
                        <!-- 未登录 -->
                        <div class="unlog">
                            <div class="log-title"><span>会员登录</span></div>
                            <div class="log-form">
                            <Form ref="loginInfo" :model="loginInfo" :rules="loginrule" :label-width="40" label-position="left">
                                <FormItem label="账号" prop="loginUserName">
                                    <Input placeholder="请输入账号" v-model="loginInfo.loginUserName" @keyup.enter.native="loginNow('loginInfo')"></Input>
                                </FormItem>
                                <FormItem label="密码" prop="loginPsd">
                                    <Input type="password" placeholder="请输入密码" v-model="loginInfo.loginPsd" @keyup.enter.native="loginNow('loginInfo')"></Input>
                                </FormItem>
                            </Form>
                            </div>

                            <div class="log-btn">
                                <Button type="error" autofocus size="large" :loading="btnLoading" long  @click="loginNow('loginInfo')">
                                    <span v-if="!btnLoading">立即登录</span>
                                    <span v-else>登录中...</span>
                                </Button>
                            </div>
                                
                            <div class="autolog-box clearfix">
                                <label for="" class="fl"><Checkbox v-model="rememberPsd">记住密码</Checkbox></label>
                                <!-- <p class="fr"><a href="javascript:void(0);" @click="mydemo(loginInfo)">游客试玩</a> | <a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank">忘记密码？</a> | <router-link to="/reg">注册</router-link></p> -->
                                <!-- <a href="###" @click="jumpToService">忘记密码</a> <span>|</span> 后续添加在注册前面 -->
                            </div>

                            <div class="third-party" style="display:none">
                                <div class="t-title">第三方账号登录</div>
                                <div class="t-con">
                                    <a href="javascript:void(0);"  class="icon-qq"></a>
                                    <a href="javascript:void(0);"  class="icon-wx"></a>
                                    <a href="javascript:void(0);"  class="icon-xl"></a>
                                </div>
                            </div>
                        </div>
                        <!-- 未登录 -->
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
import loginStore from "@/store/loginStore";
export default {
    data() {
        //登录验证
        const validateLoginUserName = (rule, value, callback) => {
            if (!value) {
                callback(new Error("账号不能为空"));
            } else {
                callback();
            }
        };
        const validateLoginPsd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("密码不能为空"));
            } else {
                callback();
            }
        };
        return {
            VueTitle:'会员登录',
            //登录信息
            rememberPsd: false, //记住密码
            loginInfo: {
                loginUserName: localStorage.getItem('userName'),
                loginPsd: localStorage.getItem('password'),
            },
            loginrule: {
                loginUserName: [{ validator: validateLoginUserName, trigger: "blur" }],
                loginPsd: [{ validator: validateLoginPsd, trigger: "blur" }]
            },
            checkedTrue: true, //记住账号

            btnLoading: false,
        };
    },
    created() {
        
    },
    mounted() {
      
    },
    computed: {
        ...mapGetters(["isLogin", 'service', 'platformConfig'])
    },
    methods: {
        ...mapActions([
            "SET_ISLOGIN",
            'SET_USER_INFO_DATA',
            'SET_ACCOUNT_DATA'
        ]),
        mydemo(loginInfo) { // 游客
            let params = {           
                flag: "4",
                code: "123",  
            };
            this.$http.post(this.urlRequest + "?m=api&c=user&a=registerMachine", params).then(res => {
                if (res.data.status == 0) {
                    localStorage.setItem("token", res.data.token);
                    localStorage.setItem("isLogin", true);
                    localStorage.setItem("isUser", false);

                    this.$http.post(this.urlRequest + "?m=api&c=user&a=userInfo", {token: res.data.token}).then(res => {
                        this.SET_USER_INFO_DATA({
                            Obj : res.data.data
                        })
                    })
                    this.SET_ACCOUNT_DATA({
                        Obj:{}
                    })
                    localStorage.setItem("userData", JSON.stringify(res.data));
                    loginStore.commit("changeIsLogin", true);
                    // this.SET_ISLOGIN({
                    //   boolean: true
                    // });
                    this.$Message.success("登录成功!");
                    this.$router.push({ //跳转到首页
                        path: "/home",
                        name: "Home"
                    });
                } else {
                    this.$Message.error(res.data.ret_msg);
                }
            }).catch(error => {
                // this.$vux.loading.hide();
                this.$Message.error("数据请求超时");
            });
        },
        loginNow(loginInfo) { //立即登录
            this.$refs[loginInfo].validate(valid => {
                if (valid) {
                    var params = {
                        username: this.loginInfo.loginUserName,
                        password: this.loginInfo.loginPsd,
                        flag: "4",
                        code: "1234",
                        type: "1",
                        openid: "",
                        nickname: "",
                        avatar: ""
                    };
                    this.btnLoading = true;
                    this.$http.post(this.urlRequest + "?m=agency&c=user&a=login", params).then(res => {
                        this.btnLoading = false;
                        if (res.data.status == 0) {
                        localStorage.setItem("token", res.data.token);
                        localStorage.setItem("isLogin", true);
                        localStorage.setItem("isUser", true);

                        let newUserData = res.data;
                        this.$http.post(this.urlRequest + "?m=api&c=user&a=userInfo", {token: res.data.token}).then(res => {
                            this.SET_USER_INFO_DATA({
                                Obj : res.data.data
                            })
                            newUserData.honor = res.data.data.honor
                            localStorage.setItem("userData", JSON.stringify(newUserData));
                        })
                            
                        this.SET_ACCOUNT_DATA({
                            Obj: {}
                        });
                        loginStore.commit("changeIsLogin", true);
                        this.SET_ISLOGIN({
                            boolean: true
                        });
                        this.$Message.success("登录成功!");
                        this.$emit("tipsFunFlag", 1); //平台公告
                        if (this.rememberPsd) {
                            localStorage.setItem("userName", this.loginInfo.loginUserName),
                            localStorage.setItem("password", this.loginInfo.loginPsd);
                        } else {
                            localStorage.setItem("password", "");
                            this.loginInfo.loginPsd = ""
                        }
                        this.$router.push({ //跳转到首页
                            path: "/personalCenter/vipReport",
                            query: { query: Date.parse(new Date())}
                        });
                        
                        } else {
                            this.$Message.error(res.data.ret_msg);
                        }
                    }).catch(error => {
                        this.btnLoading = false;
                        this.$Message.error("数据请求超时");
                    });
                } else {
                    this.$Message.error("登录失败!");
                }
            });
        },
    },
    watch: {
        
    },
};
</script>
<style scoped>
.login-main-bg {
    padding: 150px 0 120px 0;
    overflow: auto;
    background-size: cover;

        height: 100vh;

    background-color: #f0f2f5;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 110px;
    background-size: 100%;
}
.login-main-wrap {
    position: relative;
    height: 480px;
}
.login-main-wrap .user-log-box {
    z-index: 1;
    margin-left: 0;
    width:350px;
    padding: 25px;
    border-radius: 4px;
    position: absolute;
    left: auto;
    top: 50px;
    right: 50px;
}

.user-log-box {
    padding: 5px 25px 20px 25px;
    background: rgba(255,255,255,1);
    opacity:0.94;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    border-radius: 0px 0px 4px 4px;
}
.user-log-box .log-title {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    color: #48484C;
    line-height: 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E6E3DA;
}
.user-log-box .log-title span {
    position: relative;
}
.user-log-box .log-title span::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 3px solid #C8313C;
}
.user-log-box .log-form {
    padding-top: 20px;
}
.autolog-box {
    padding-top: 10px;
}
.autolog-box .fr,
.autolog-box a {
    color: #C82834;
}
.autolog-box a:hover {
    color: #E64254;
}
</style>


// WEBPACK FOOTER //
// src/components/login/login.vue